//@ts-nocheck
import React, { useRef, useState, useEffect } from 'react'
import { Popup, Tabs, Ellipsis, Toast } from 'antd-mobile'
import { Swiper, SwiperSlide } from 'swiper/react'
import ImageTextComp from './components/ImageText/index'
import CommentComp from './components/Comment'
import Nav from './components/Nav'
import CollectTip from './components/CollectTip'
import ToolRights from './components/ToolsRight'
import ImageText from './images/image-text.png'
import Footer from './images/footer.png'
import PlayIcon from './images/play.png'
import SingIcon from './images/douyin-icon.png'
import RelevantSearch from './images/search.png'
import RightIcon from './images/white-arrows.png'
import CloseIcon from './images/black-close-icon.png'
import './index.less'

interface IProps {
  originData: any
}

const DouyinScaleAeromdelling = ({ originData }: IProps) => {
  const [dataList, setDataList] = useState([])
  const [visible, setVisible] = useState(false)
  const [userIsLike, setUserIsLike] = useState(false)
  const [userIsCollected, setUserIsCollected] = useState(false)
  const [userCollectTip, setUserCollectTip] = useState(false)
  const [userCommnetData, setUserCommnetData] = useState([])
  const [videoList, setVideoList] = useState({})
  const [currentId, setCurrentId] = useState(0)
  const [userCommnetList, setUserCommentList] = useState([])
  const [commentListLength, setCommentListLength] = useState(0)
  const [prevIndex, setPrevIndex] = useState(0)
  const bottomImgHeightRef = useRef(null)

  useEffect(() => {
    let arr = originData
    if (arr?.length) {
      let _videoList = {}
      arr?.forEach((v, i) => {
        if (v?.simulationDisplayFormCodes?.includes(3)) {
          _videoList[`video${v.id}`] = {
            isPlay: false
          }
        }
      })
      if (arr[0]?.simulationDisplayFormCodes?.includes(3)) {
        let currentId = `video${arr[0].id}`
        _videoList[currentId].isPlay = true
        setTimeout(() => {
          // @ts-ignore
          document.getElementById(currentId)?.play()
        }, 100)
      }
      setVideoList(_videoList)
    }
    setDataList(arr)
  }, [originData])

  const onSlideChange = (swiper: any) => {
    setPrevIndex(swiper.realIndex)
    if (dataList[swiper.realIndex].simulationDisplayFormCodes.includes(3)) {
      let currentId = `video${dataList[swiper.realIndex].id}`
      let _videoList = JSON.parse(JSON.stringify(videoList))
      Object.keys(_videoList).forEach((videoId) => {
        _videoList[videoId].isPlay = currentId === videoId
        if (_videoList[videoId].isPlay) {
          // @ts-ignore
          document.getElementById(videoId)?.play()
        } else {
          // @ts-ignore
          document.getElementById(videoId)?.pause()
        }
      })
      setVideoList(_videoList)
    }
    if (
      dataList[swiper.realIndex].simulationDisplayFormCodes.includes(2) &&
      dataList[prevIndex].simulationDisplayFormCodes.includes(3)
    ) {
      let currentId: string = `video${dataList[prevIndex].id}`
      let _videoList = JSON.parse(JSON.stringify(videoList))
      Object.keys(_videoList).forEach((videoId) => {
        _videoList[videoId].isPlay = currentId === videoId
        if (_videoList[videoId].isPlay) {
          // @ts-ignore
          document.getElementById(videoId)?.pause()
        }
      })
      setVideoList(_videoList)
    }
  }

  const onSwitchPlayVideo = (videoId: number) => {
    let _videoList = JSON.parse(JSON.stringify(videoList))
    _videoList[videoId].isPlay = !_videoList[videoId].isPlay
    if (_videoList[videoId].isPlay) {
      // @ts-ignore
      document.getElementById(videoId)?.play()
    } else {
      // @ts-ignore
      document.getElementById(videoId)?.pause()
    }
    setVideoList(_videoList)
  }

  const handleShareClick = () => {
    Toast.show({ content: '分享成功' })
  }

  const onUserComment = (commentData) => {
    userCommnetData.push(commentData)
    setCommentListLength(userCommnetData?.length)
  }

  const handleCollectClick = (index: number) => {
    if (userIsCollected) {
      setUserIsCollected(false)
      dataList[index].userIsCollected = false
    } else {
      setUserIsCollected(true)
      dataList[index].userIsCollected = true
      setUserCollectTip(true)
      setTimeout(() => {
        setUserCollectTip(false)
      }, 2000)
    }
  }

  const handleCommentClick = (id: number) => {
    setCurrentId(id)
  }

  const setCommentPopup = () => {
    setVisible(true)
  }

  const handleLikeClick = (index: number) => {
    if (userIsLike) {
      setUserIsLike(false)
      dataList[index].userIsLike = false
    } else {
      setUserIsLike(true)
      dataList[index].userIsLike = true
    }
  }

  return (
    <div className="container-box">
      <div className="antd-swipe">
        <Nav />
        <Swiper
          direction="vertical"
          style={{ height: `calc(100vh - 80px)` }}
          onSlideChange={onSlideChange}
          className="douyin-Swiper"
        >
          {dataList?.map((data, index) => {
            return (
              <SwiperSlide key={index} style={{ height: '100%' }}>
                <div
                  className="vertical-content"
                  style={{
                    backgroundColor: 'black',
                    height: `calc(100vh - 80px)`
                  }}
                >
                  {data?.simulationDisplayFormCodes?.includes(3) && (
                    <>
                      <div
                        style={{
                          width: '100vw',
                          height: `calc(100vh - 80px)`
                        }}
                        onClick={() => onSwitchPlayVideo(`video${data.id}`)}
                      >
                        <video
                          id={`video${data.id}`}
                          style={{
                            width: '100vw',
                            height: `calc(100vh - 80px)`
                          }}
                          src={data.attachmentVos[0].resourceUrl}
                          controls={false}
                          loop={true}
                        />
                      </div>
                      {/* 暂停按钮 */}
                      {!videoList[`video${data.id}`]?.isPlay && (
                        <div
                          className="douyin-play"
                          onClick={() => onSwitchPlayVideo(`video${data.id}`)}
                        >
                          <img src={PlayIcon} alt="" />
                        </div>
                      )}
                    </>
                  )}
                  {(data?.isAd || data?.simulationDisplayFormCodes?.includes(2)) && (
                    <ImageTextComp startPlay={data.startPlay} images={data.attachmentVos} />
                  )}
                  <ToolRights
                    avatar={data?.simulationChoiceHeadPortraitResourceUrl}
                    index={index}
                    dataId={data?.id}
                    userIsCollected={data?.userIsCollected}
                    userIsLike={data?.userIsLike}
                    simulationDisplayFormCodes={data?.simulationDisplayFormCodes}
                    handleLikeClick={handleLikeClick}
                    handleCommentClick={handleCommentClick}
                    setCommentPopup={setCommentPopup}
                    handleCollectClick={handleCollectClick}
                    handleShareClick={handleShareClick}
                  />
                  <div
                    className={`production-box ${data?.simulationDisplayFormCodes?.includes(3)
                      ? 'production-box-distance-video'
                      : 'production-box-distance-img'
                      }`}
                  >
                    <div className="production-name">
                      <span className="text">
                        {`@${data?.simulationChoiceUserName}`}
                      </span>
                      {(data?.simulationDisplayFormCodes?.includes(2)) && (
                        <div className="image-text">
                          <img src={ImageText} alt="" />
                          <span className="text">图文</span>
                        </div>
                      )}
                    </div>
                    <div className="production-des">
                      {data?.content && (
                        <Ellipsis
                          direction="end"
                          rows={2}
                          content={data?.content}
                          expandText="展开"
                          collapseText="收起"
                        />
                      )}
                    </div>
                    <div className="douyin-song">
                      <img src={SingIcon} alt="" />
                      <span className="text">播放歌曲-歌手</span>
                    </div>
                  </div>
                  {data?.simulationDisplayFormCodes?.includes(3) && (
                    <div className="relevant-search">
                      <div className="relevant-search-left">
                        <img src={RelevantSearch} alt="" />
                        <span>相关搜索 · iphone13灵动岛怎么</span>
                      </div>
                      <img className="right-icon" src={RightIcon} alt="" />
                    </div>
                  )}
                </div>
              </SwiperSlide>
            )
          })}
        </Swiper>
        <div className="container-bottom" style={{ position: 'absolute' }}>
          <img height={80} ref={bottomImgHeightRef} src={Footer} alt="" />
        </div>
        {userCollectTip && <CollectTip />}
        <Popup
          visible={visible}
          bodyStyle={{
            borderTopLeftRadius: '8px',
            borderTopRightRadius: '8px',
            minHeight: '594px'
          }}
        >
          <div className="douyin-close-img" onClick={() => setVisible(false)}>
            <img src={CloseIcon} alt="" />
          </div>
          <Tabs>
            <Tabs.Tab title={`评论${commentListLength}`} key="comment">
              <CommentComp
                userCommnetList={userCommnetList}
                currentId={currentId}
                onUserComment={onUserComment}
              />
            </Tabs.Tab>
            {/* 该处无交互 */}
            <Tabs.Tab disabled title="赞 1.7万" key="vegetables" />
            <Tabs.Tab disabled title="浏览 0" key="animals" />
          </Tabs>
        </Popup>
      </div>
    </div>
  )
}

export default DouyinScaleAeromdelling
